import React from 'react';
import {
  View,
  TouchableOpacity,
  CameraRoll,
  Text,
  Platform,
  Alert,
} from 'react-native';


import BaseComponent from "./BaseComponent";
import TImage from "../../components/TImage";
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import CommonShowOptionAction from '../../actions/common/CommonShowOptionAction';
import ImageUtil from './ImageUtil'

const ITEM_WIDTH = 200;
const ITEM_HEIGHT = 60;
export default class ImageFullScreenView extends BaseComponent {
  constructor(props) {
    super(props);

    this.state.operateTypes = this.props.data.operateTypes === undefined ? [] : this.props.data.operateTypes.concat();
    this._pushSaveData(this.props, this.state.operateTypes);
    this.imgUrl = "";
  }

  componentWillUpdate(nextProps, nextStates) {
    if(nextProps.data && nextProps.data.operateTypes != this.props.data.operateTypes) {
      nextStates.operateTypes = nextProps.data.operateTypes.concat();
      this._pushSaveData(nextProps, nextStates.operateTypes);
    }
  }

  _pushSaveData(props, operateTypes) {
    if(props.data.isNeedSave === true) {
      operateTypes.push({name:"save", value:"保 存"});
    }
  }

  render() {
    return(
      <View style={this.props.style}>
        <TouchableOpacity activeOpacity={1} style={{width:SizeUtils.getWindowSize().width,
              height:SizeUtils.getWindowSize().height,
              backgroundColor:"#000000dd", flexDirection:"row",
              justifyContent:"center", alignItems:"center"}} onLongPress={this._onLongPress.bind(this)}
            onPress={this._onPress.bind(this)}>
              <TImage source={{uri:this.props.data.source}} style={{width:SizeUtils.getWindowSize().width,
                  height:SizeUtils.getWindowSize().height}} translatedSize={true} resizeMode={"contain"}/>
        </TouchableOpacity>
        <View style={{width:SizeUtils.getWindowSize().width,
              height:SizeUtils.translateDesignHeightToCode(ITEM_HEIGHT), backgroundColor:"#00000000",
              position:"absolute", bottom:0, paddingLeft:SizeUtils.translateDesignWidthToCode(40),
              paddingRight:SizeUtils.translateDesignWidthToCode(40),
              flexDirection:"row", justifyContent:"space-around"}}>
            {
              this.state.operateTypes.map(
                  (operateData, index) => {
                    return this._renderOperateItem(operateData, index);
                  }
              )
            }
        </View>
      </View>
    )
  }

  _renderOperateItem(operateData, index) {
    return(
      <TouchableOpacity key={index} style={{width:SizeUtils.translateDesignWidthToCode(ITEM_WIDTH),
            height:SizeUtils.translateDesignHeightToCode(ITEM_HEIGHT), backgroundColor:"#666666",
            flexDirection:"row", alignItems:"center", justifyContent:"center",
            borderRadius:SizeUtils.translateDesignNumToCode(10),}}
          onPress={() => this._onPressOperateItem(operateData)}
        >
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#ffffff", textAlign:"center"}}>
          {operateData.value}
        </Text>
      </TouchableOpacity>
    )
  }

  _onPressOperateItem(operateData) {
    if(operateData.name == "save") {
      this._saveImage();
    }
    else {
      this.props.data.callback(operateData);
      this.props.onClose();
    }
  }

  _onPress() {
    this.props.onClose();
  }

  _onLongPress() {
    console.log("long press " + this.props.data.source)
    // return;//暂时屏蔽
    // new CommonShowOptionAction().call(this, [{text:"保存图片", onPress:this._saveImage.bind(this)}])
  }

  _saveImage() {
    if(Platform.OS === "android" ){
      let data = this.props.data.source;
      if( this.props.data.source.indexOf("data:") == 0){
        let data = this.props.data.source.split(",")[1];
      }

      // alert(data[1])
      ImageUtil.saveImage(data).then((ok) => {
        Alert.alert('提示', '保存成功!', [
            {text:'确认', onPress:()=>{}}
          ])
        console.log("保存成功");
        })
        .catch((error) => {
          Alert.alert('提示', '保存失败！\n' + error, [
              {text:'确认', onPress:()=>{}}
            ])
          console.log(error)
        })
      return;
    }
    let promise = CameraRoll.saveToCameraRoll(this.props.data.source, "photo");
    promise.then(function(result) {
      Alert.alert('提示', '保存成功!', [
          {text:'确认', onPress:()=>{}}
        ])
      console.log("保存成功");
      })
      .catch(function(error) {
        Alert.alert('提示', '保存失败！\n' + error, [
            {text:'确认', onPress:()=>{}}
          ])
      });
      console.log(promise);
  }
}
